<script lang="ts" setup>
import {ref} from 'vue'
import img1 from '../../../../static/img/index/laboratory/1.jpg'
import img2 from '../../../../static/img/index/laboratory/2.jpg'
import img3 from '../../../../static/img/index/laboratory/3.jpg'
import img4 from '../../../../static/img/index/laboratory/4.jpg'
import img5 from '../../../../static/img/index/laboratory/5.jpg'
import img6 from '../../../../static/img/index/laboratory/6.jpg'
import img7 from '../../../../static/img/index/laboratory/7.jpg'
import img8 from '../../../../static/img/index/laboratory/8.jpg'
import img9 from '../../../../static/img/index/laboratory/9.jpg'
const imgList = [img1, img2, img3, img4, img5, img6, img7, img8, img9]
const activeIndex = ref<number>(4) 
</script>

<template>
    <div class="body">
        <img :src="item" alt="" :class="`img${index+1}`" v-for="(item,index) in imgList">
    </div>
</template>

<style scoped lang="scss">
.body {
    position: relative;
    height: 300px;
    box-sizing: border-box;
    overflow: hidden;
    width: 90%;
    margin: 0 auto;
}

.img1 {
    height: 300px;
    top: 0;
    position: absolute;
    clip: rect(0, 120px, 300px, 0);
}

.img2 {
    height: 300px;
    top: 0;
    left: 120px;
    position: absolute;
    clip: rect(0, 120px, 300px, 0);
}

.img3 {
    height: 300px;
    top: 0;
    left: 240px;
    position: absolute;
    clip: rect(0, 120px, 300px, 0);
}

.img4 {
    height: 300px;
    top: 0;
    left: 360px;
    position: absolute;
    clip: rect(0, 120px, 300px, 0);
}

.img5 {
    height: 300px;
    top: 0;
    left: 480px;
    width: 400px;
    position: absolute;
    clip: rect(0, 300px, 300px, 150px);
}

.img6 {
    height: 300px;
    top: 0;
    left: 600px;
    position: absolute;
    clip: rect(0, 420px, 300px, 280px);
}

.img7 {
    height: 300px;
    top: 0;
    left: 720px;
    position: absolute;
    clip: rect(0, 430px, 300px, 280px);
}

.img8 {
    height: 300px;
    top: 0;
    left: 840px;
    position: absolute;
    clip: rect(0, 430px, 300px, 280px);
}

.img9 {
    height: 300px;
    top: 0;
    left: 960px;
    position: absolute;
    clip: rect(0, 430px, 300px, 280px);
}
</style>